<template>
	<div class="home">
		<div class="by" :style="{ backgroundImage: 'url(' + (getHomeBgColor?.bgImagePath || bgUrl) + ')',
			 backgroundRepeat: 'no-repeat' }">
			<div id="site-info">
				<h1 style="font-size: 40px;">CHEN
				</h1>
				<div class="info">
					<p class="typer-static"></p>
					<!-- 动态变化的内容-->
					<p class="typer-dynamic">
						<span class="cut">
							<span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span>
							<!-- <span class="word">{{str}}</span> -->
						</span>
						<!-- 模拟光标-->
						<span class="typer-cursor"></span>
					</p>
				</div>
			</div>
		</div>
		<!-- 内容 部分-->
		<div class="content">
			<el-card v-for="(item,index) in articlesList" :key="index" style="margin: 10px 0;padding: 20px 0px;">
				<template v-if="item.isShow==1">
					<div class="content-title">
						<div style="float: left;font-weight: 700;font-size: 20px;">
							<span class="titleH" @click="gotoDateli(item)">{{item.title}}</span>
						</div>
						<div style="float: right;text-align: center;">
							<i class="iconfont icon-yanjing"></i>&nbsp;
							<span>{{item.viewCounts}}</span> <span style="margin-left: 5px;">{{item.commentCounts}}</span>
						</div>
					</div>

					<div class="content-summarize">
						概述 : {{item.summary}}
					</div>

					<div class="content-author">
						作者 : &nbsp;
						<span style="color: gray;">{{item.author}}</span>
					</div>
					<div class="content-tag">
						<div>
							标签 : <span class="tag" v-for="(i,indexs) in item.tags" @click="getoCategoryAndTag(i)">{{i.tagName}}</span>
						</div>
						<div>
							<i class="iconfont icon-shijian2"></i>
							<span style="color: gray;"> {{item.createDate}}</span>
						</div>
					</div>
				</template>
			</el-card>

			<!-- 分页 部分-->
			<div style="width: 100%;margin: 0 auto;text-align: center;">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="params.pageNum" :page-sizes="[5,10,15]" :page-size="params.pageSize"
					layout="  prev, pager, next " :total="total">
				</el-pagination>
			</div>
		</div>
		<el-backtop :bottom="100" />
	</div>
</template>

<script>
	// 点击效果
	import Click from '../utils/ClickShow.js'
	// 背景画布
	import axios from 'axios'
	import $ from 'jquery'
	import { mapGetters } from 'vuex'
	export default {
		name: 'Home',
		data() {
			return {
				vdaH: 0,
				words: [], //字母数组push，pop的载体
				str: "~ welcome ~", //str初始化
				letters: [], //str分解后的字母数组
				order: 1,
				articlesList: [],
				params: {
					pageNum: 1,
					pageSize: 7
				},
				total: 0,
				bgUrl: "https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg-background/category-01.jpg"
			}
		},
		computed: {
			// 通过 mapGetters 辅助函数映射 getters 到组件的计算属性
			...mapGetters(['getHomeBgColor'])
		},
		methods: {
			//开始输入的效果动画
			begin() {
				this.letters = this.str.split("")
				for (var i = 0; i < this.letters.length; i++) {
					setTimeout(this.write(i), i * 100);
				}
			},
			//开始删除的效果动画
			back() {
				let L = this.letters.length;
				for (var i = 0; i < L; i++) {
					setTimeout(this.wipe(i), i * 50);
				}
			},
			//输入字母
			write(i) {
				return () => {
					let L = this.letters.length;
					this.words.push(this.letters[i]);
					let that = this;
					/*如果输入完毕，在2s后开始删除*/
					if (i == L - 1) {
						setTimeout(function () {
							that.back();
						}, 4000);
					}
				}
			},
			//擦掉(删除)字母
			wipe(i) {
				return () => {
					this.words.pop(this.letters[i]);
					/*如果删除完毕，在300ms后开始输入*/
					if (this.words.length == 0) {
						this.order++;
						let that = this;
						setTimeout(function () {
							that.begin();
						}, 300);
					}
				}
			},
			getArticles() {
				debugger
				this.$api.home.getHomeList(this.params).then(res => {
					if (res.code == 200) {

						this.articlesList = res.data
						this.total = res.pageParams.total
					} else {
						this.$message.error("加载失败!")
					}
				})
			},
			handleSizeChange(pageSize) {
				this.params.pageSize = pageSize
				this.getArticles()
			},
			handleCurrentChange(pageNum) {
				this.params.pageNum = pageNum
				this.getArticles()
			},
			gotoDateli(item) {
				this.$router.push({
					name: "articleDetail",
					params: {
						id: item.id
					}
				})
			},
			getoCategoryAndTag(i) {
				let list = {
					name: i.tagName,
					id: i.id
				}
				this.$router.push({
					path: '/CategoryAndTag',
					query: {
						list: JSON.stringify(list),
						Is: JSON.stringify("Tag")
					}
				})
			}

		},
		mounted() {
			debugger
			let h = document.documentElement.clientHeight || document.body.clientHeight;
			this.vdaH = h - 130 + 'px';
			Click(".home");
			this.begin()
			this.getArticles()

		},
		watch: { //监听order值的变化，改变str的内容
			order(old, newV) {
				if (this.order % 4 == 1) {
					this.str = "本站名言：只要学不死就往死里学！"
				} else if (this.order % 4 == 2) {
					this.str = "欢迎来到CS博客平台"
				} else if (this.order % 4 == 3) {
					this.str = "山有路勤为径"
				} else {
					this.str = "学海无涯苦作舟"
				}
			},
			$route: {
				handler(to, from) {
					location.reload()
					// console.log(to);
				},
				deep: true
			}
		}
	}
</script>

<style lang="less">
	.by {
		/* background: url("https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg-background/category-01.jpg") no-repeat; */
		width: 100%;
		min-height: 100vh;
		background-size: cover;
		background-attachment: fixed;
		overflow: hidden;
		z-index: 10;
		position: relative;
	}

	#site-info {
		position: absolute;
		top: 43%;
		width: 100%;
		text-align: center;
		color: white;
	}

	#site-info .info {
		padding-top: 10px;
		box-sizing: border-box;
	}

	.typer-dynamic {
		position: relative;
		font-size: 25px;
	}

	.cut {
		color: #e8e8e8;
	}

	.typer-cursor {
		position: absolute;
		height: 100%;
		top: 0;
		background-color: #e8e8e8;
		animation: flash 1.5s linear infinite;
	}

	// 打字部分 end


	// 内容分页部分 star
	.content {
		width: 1000px;
		height: auto;
		margin: 10px auto;
		box-sizing: border-box;
	}

	.content-title {
		width: 100%;
		box-sizing: border-box;
		cursor: pointer;
	}

	.titleH:hover {
		color: #95e7b3;
	}


	.content-summarize {
		clear: both;
		position: relative;
		top: 10px;
	}

	.content-author {
		position: relative;
		top: 20px;
		display: flex;
	}

	.content-tag .tag {
		height: 20px;
		line-height: 20px;
		background-color: rgba(103, 194, 58, .1);
		border-radius: 5px;
		border-color: rgba(103, 194, 58, .2);
		padding: 3px;
		color: #67c23a;
		margin: 0 5px;
		cursor: pointer;
	}

	.content-tag {
		position: relative;
		top: 30px;
		display: flex;
		justify-content: space-between;

	}
</style>